<template>
  <div class="taskManageHome">
    <van-nav-bar title="任务领取" left-text="返回" @click-left="onClickLeft"></van-nav-bar>
    <van-form @submit="getTask" validate-first :show-error-message="false" class="taskManageHome-form">
      <van-field
        size="large"
        ref="pickTaskCode"
        v-model="pickTaskCode"
        placeholder="请扫描任务号"
        @focus="disabledKeyboard"
        @click="disabledKeyboard"
        @keyup.enter.native="getTask"
        :readonly="pickTaskCodeReadOnly"
        :rules="[{required: true, message: '请扫描任务号'}]"
      />
      <div class="pick-btn">
        <van-button type="primary" size="large" native-type="submit">领取</van-button>
      </div>
    </van-form>
  </div>
</template>
<script>
import {mapGetters} from "vuex";
import {getTaskWithTaskCode, selectTaskListApi} from "@/api/pickScan/taskManageHome";
export default {
  name: "picktask",
  data() {
    return {
      pickTaskCode: "",
      pickTaskCodeReadOnly: false
    };
  },
  computed: {
    ...mapGetters("user", ["userData"]),
    taskType() {
      return this.$route.query.type;
    }
  },
  created() {
    this.$nextTick(() => {
      this.$refs["pickTaskCode"].focus();
    });
  },
  methods: {
    disabledKeyboard() {
      this.pickTaskCodeReadOnly = true;
      setTimeout(() => {
        this.pickTaskCodeReadOnly = false;
      }, 200);
    },
    //点击领取按钮按钮时触发
    getTask() {
      if (!this.pickTaskCode.trim()) {
        this.pickTaskCode = "";
        this.$refs["pickTaskCode"].validate();
        this.$refs["pickTaskCode"].focus();
        return;
      }
      getTaskWithTaskCode(
        this.$root.storerWarehouseBrand.storerId,
        this.$root.storerWarehouseBrand.warehouseId,
        this.$root.storerWarehouseBrand.brandId,
        this.taskType,
        this.pickTaskCode,
        this.userData.sysUserLoginName
      ).then(response => {
        this.pickTaskCode = "";
        this.$refs["pickTaskCode"].focus();
        if (response.data.status) {
          //this.$toast.success(response.data.message);
          this.getSelectTaskList();
        } else {
          this.$toast.fail(response.data.message);
        }
      });
    },
    // 领取成功则跳转至拣货页面
    getSelectTaskList() {
      // 如果有拣货数据，则直接跳转到拣货页面，否则跳转到领取页面
      selectTaskListApi(
        this.$root.storerWarehouseBrand.storerId,
        this.$root.storerWarehouseBrand.warehouseId,
        this.$root.storerWarehouseBrand.brandId,
        this.taskType,
        this.userData.sysUserLoginName,
        1
      ).then(response => {
        if (response.data.status) {
          let list = response.data.data;
          if (list.length > 0) {
            setTimeout(() => {
              this.$router.push({
                name: "b2cPickickScanHeader",
                params: {
                  pickTaskId: list[0].id,
                  pickTaskCode: list[0].pickTaskCode,
                  brandCode: list[0].brandCode,
                  bussinessType: list[0].bussinessType,
                  shelvesName: list[0].shelvesName,
                  orderType: list[0].orderType,
                  cartonNo: list[0].cartonNo,
                  cartonId: list[0].cartonId,
                  taskQty: list[0].taskQty,
                  pickedQty: list[0].pickedQty
                }
              });
            }, 500);
          } else {
            this.$toast.fail("暂无拣货任务");
          }
        } else {
          this.$toast.fail(response.data.message);
        }
      });
    },
    //返回方法
    onClickLeft() {
      this.$router.push({
        name: "pickIndex"
      });
    }
  }
};
</script>
<style lang="less" scoped>
.taskManageHome {
  &-form {
    margin: 30px 16px 16px;
    /deep/ .van-cell {
      &::after {
        left: 0;
      }
    }
    .pick-btn {
      margin-top: 30px;
      /deep/ .van-button--large {
        font-size: 50px;
        height: 120px;
      }
    }
  }
}
</style>
